<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf - 8">
        <meta name = "viewport" content="
        initial-scale= 1.0,maximum-scale=1.0,user-scalable=no">
        <title>

        </title>
        <script src="C:/Users/24098/Desktop/978-7-302-48199-7《HTML5 App应用开发教程》教辅/配套资源包/chapter06/scripts/jquery-3.1.1.min.js">
        </script>
<style>
    input[type = 'checkbox']{
        width:30px;
        height: 30px;
    }
    label{
        font-size:20px;
    }
    input[type = 'button']{
        margin-top: 30px;
        width:100px;
        height:30px;
        font-size:15px;
    }
    .bkColorRed {
				background-color: lightcoral;
			}
</style>
</head>
    <body>
        <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>党员</th>
            <th>高等数学</th>
            <th>大学英语</th>
            <th>计算机文化基础</th>
            
        </tr>
        <tr>
            <td>13310320712</td>
            <td>陈中华</td>
            <td>男</td>
            <td><input type="checkbox" checked/></td>
            <td>87</td>
            <td>83</td>
            <td>94</td>
        </tr>
        <tr>
            <td>13310320713</td>
            <td>王楠</td>
            <td>女</td>
            <td><input type="checkbox" checked/></td>
            <td>84</td>
            <td>85</td>
            <td>93</td>
        </tr>
        <tr>
            <td>13310320714</td>
            <td>杨佳敏</td>
            <td>女</td>
            <td><input type="checkbox"/></td>
            <td>88</td>
            <td>89</td>
            <td>96</td>
        </tr>
        <tr>
            <td>13310320715</td>
            <td>李茂杨</td>
            <td>男</td>
            <td><input type="checkbox" checked/></td>
            <td>82</td>
            <td>84</td>
            <td>93</td>
        </tr>
        <tr>
            <td>13310320716</td>
            <td>赵佳伟</td>
            <td>男</td>
            <td><input type="checkbox"/></td>
            <td>79</td>
            <td>82</td>
            <td>90</td>
            
        </tr>
        <tr>
            <td>13310320717</td>
            <td>张思琪</td>
            <td>女</td>
            <td><input type="checkbox" checked/></td>
            <td>94</td>
            <td>82</td>
            <td>90</td>
        </tr>
        </table>       

        
    

        <script>
            $(function(){
                var $collection = $("tr");
                
                
           $("<th>平均成绩</th>").appendTo($collection.eq(0))
          for(var x=1;x<$collection.length;x++ ){
            var number=(((parseFloat($collection.eq(x).children('td').eq(4).text()))+parseFloat($collection.eq(x).children('td').eq(5).text())+parseFloat($collection.eq(x).children('td').eq(6).text()))/3).toFixed(1);
            var $y = $("<td>"+number+"</td>");
            $y.appendTo($collection.eq(x));
          }
          for(var x=1;x<$collection.length;x++ ){
           var $tr = $collection.eq(x);
           console.log($tr);
           if($tr.find("td:contains('女')").length==1&&parseFloat($tr.find("td:last").text())>=87){
            $tr.addClass("bkColorRed");
           };
          }
            
            });
       
           
        </script>

    </body>
</html>